<template>
  <div class="allgroup-container">
    <div class="main">
      <div class="main__top">
        <div class="tabs">
          <nuxt-link
            to="/group/AllJoined"
            :class="
              $route.path.indexOf('AllGroup') < 0
                ? 'tab-node--active'
                : 'tab-node'
            "
            >已加入的圈子</nuxt-link
          >
          <nuxt-link
            to="/group/AllGroup"
            :class="
              $route.path.indexOf('AllGroup') > 0
                ? 'tab-node--active'
                : 'tab-node'
            "
            >全部圈子</nuxt-link
          >
        </div>
        <div class="sub-tabs">
          <nuxt-link
            v-for="(circle, index) in circleList"
            :key="index"
            :to="'/group/selected/' + circle.id"
            :class="
              $route.params.id == circle.id
                ? 'sub-tab-node--active'
                : 'sub-tab-node'
            "
            >{{ circle.name }}
          </nuxt-link>
        </div>
      </div>
      <div class="main-content">
        <div class="content-tabs">
          <nuxt-link
            :to="'/group/selected/' + $route.params.id"
            :class="
              $route.path.endsWith($route.params.id)
                ? 'content-tabs__node--active'
                : 'content-tabs__node'
            "
            >全部</nuxt-link
          >
          <nuxt-link
            :to="'/group/selected/' + $route.params.id + '/suggest'"
            :class="
              $route.path.indexOf('suggest') > 0
                ? 'content-tabs__node--active'
                : 'content-tabs__node'
            "
            >建议</nuxt-link
          >
          <nuxt-link
            :to="'/group/selected/' + $route.params.id + '/seek'"
            :class="
              $route.path.indexOf('seek') > 0
                ? 'content-tabs__node--active'
                : 'content-tabs__node'
            "
            >求助</nuxt-link
          >
          <nuxt-link
            :to="'/group/selected/' + $route.params.id + '/proposal'"
            :class="
              $route.path.indexOf('proposal') > 0
                ? 'content-tabs__node--active'
                : 'content-tabs__node'
            "
            >提案</nuxt-link
          >
        </div>
        <nuxt-child />
      </div>
    </div>
    <div class="aside">
      <SocialCircle />
    </div>
  </div>
</template>

<script>
import Floor from '../../components/Floor'
import SocialCircle from '../../components/SocialCircle'
export default {
  name: 'allJoineds',
  data() {
    return {
      circleList: [
        { name: '柔派圈子2', id: '11' },
        { name: '游戏圈子5', id: '112' },
        { name: '穿戴酷玩圈子7', id: '113' },
        { name: '随手拍圈子1', id: '114' },
      ],
      floors: [
        {
          // 楼层
          type: 1,
          userInfo: {
            name: '张三三',
            //评论人头像
            avatar:
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409',
            //多久前评论
            time: '3小时',
            // 评论设备
            device: 'Flexpai2',
            // 评论内容
          },
          comment: {
            // 评论内容
            text: '全新的用户体验',
            // 评论类型
            type: ['1', '2'],
          },
          picList: [
            {
              src:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
            },
            {
              src:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/4.jpg',
            },
            {
              src:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/5.jpg',
            },
          ],
        },
        {
          // 楼层
          type: 2,
          userInfo: {
            name: '张三三',
            //评论人头像
            avatar:
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409',
            //多久前评论
            time: '3小时',
            // 评论设备
            device: 'Flexpai2',
            // 评论内容
          },
          comment: {
            // 评论内容
            text: '全新的用户体验',
            // 评论类型
            type: ['1', '2'],
          },
          video:
            'https://test.charrobot.com/file_upload/files/606d6f69c51c2/1617953317169242.mp4',
        },
      ],
    }
  },
  methods: {},
  components: {
    Floor,
    SocialCircle,
  },
}
</script>

<style lang="scss" scoped>
.allgroup-container {
  padding-top: 5px;
  padding-bottom: 24px;
  display: flex;
  justify-content: center;
}
.main {
  width: 800px;
}
.main__top {
  background: $color-background;
  margin-bottom: 8px;
  padding: 24px 32px;
  height: 128px;
}
.main-content {
  min-height: 100vh;
  background: $color-background;
}

.tabs {
  padding-bottom: 24px;
}
.tab-node {
  opacity: 0.6;
  font-size: 16px;
  font-weight: 500;
}
.tab-node--active {
  font-size: 16px;
  font-weight: 500;
}
.sub-tabs {
  display: flex;
}
.sub-tab-node {
  margin-right: 8px;
  padding: 6px 16.5px;
  background: rgba($color: #000000, $alpha: 0.05);
  border-radius: 20px;
  color: rgba($color: #000000, $alpha: 0.6);
  font-size: 14px;
  cursor: pointer;
}
.sub-tab-node--active {
  margin-right: 8px;
  padding: 6px 16.5px;
  background: rgba($color: $color-royole, $alpha: 0.2);
  border-radius: 20px;
  color: rgba($color: #000000, $alpha: 0.6);
  font-size: 14px;
  cursor: pointer;
}

.content-tabs {
  height: 68px;
  padding: 24px 32px;
  display: flex;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
}
.content-tabs__node {
  margin-right: 24px;
  color: rgba($color: #000000, $alpha: 0.6);
  padding-bottom: 4px;
}
.content-tabs__node--active {
  margin-right: 24px;
  color: $color-royole;
  padding-bottom: 4px;
  border-bottom: 2px solid $color-royole;
}
.aside {
  margin-left: 24px;
  width: 376px;
}
.gap {
  height: 1px;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
  margin-bottom: 32px;
}
</style>
